<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业提交标注系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }

        .header {
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
        }

        .filter-container {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .filter-container select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .student-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .student-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .student-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .student-item.marked {
            background-color: #ffebee;
            border-left: 4px solid #f44336;
        }

        .student-name {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 22px;
        }

        .student-id {
            color: #666;
            font-size: 14px;
        }

        .controls {
            margin-top: 20px;
            text-align: center;
        }

        .reset-button {
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .reset-button:hover {
            background-color: #d32f2f;
        }

        .status-info {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>作业提交标注系统</h1>
        <p>点击学生卡片标记/取消标记作业提交状态</p>
    </div>

    <div class="filter-container">
        <label for="class-filter">班级：</label>
        <select id="class-filter" onchange="filterStudents()">
            <option value="all">所有班级</option>
        </select>

        <label for="status-filter">状态：</label>
        <select id="status-filter" onchange="filterStudents()">
            <option value="all">全部学生</option>
            <option value="unmarked">未提交</option>
            <option value="marked">已提交</option>
        </select>
    </div>

    <div class="student-list" id="student-list">
        <!-- 学生信息将通过JavaScript动态生成 -->
    </div>

    <div class="status-info" id="status-info">
        <!-- 统计信息将在这里显示 -->
    </div>

    <div class="controls">
        <button class="reset-button" onclick="resetMarks()">重置所有标注</button>
    </div>

    <script>
        const STORAGE_KEY = 'student_data';
        const MARKED_KEY_PREFIX = 'marked_';
        const FILTER_STATE_KEY = 'filter_state';

        // 从本地存储加载学生数据
        function loadStudentData() {
            const data = localStorage.getItem(STORAGE_KEY);
            if (!data) {
                console.error('未找到学生数据');
                return [];
            }
            try {
                return JSON.parse(data);
            } catch (e) {
                console.error('解析学生数据失败:', e);
                return [];
            }
        }

        // 保存筛选状态
        function saveFilterState() {
            const state = {
                class: document.getElementById('class-filter').value,
                status: document.getElementById('status-filter').value
            };
            localStorage.setItem(FILTER_STATE_KEY, JSON.stringify(state));
        }

        // 加载筛选状态
        function loadFilterState() {
            const state = localStorage.getItem(FILTER_STATE_KEY);
            if (state) {
                try {
                    return JSON.parse(state);
                } catch (e) {
                    console.error('解析筛选状态失败:', e);
                }
            }
            return {
                class: 'all',
                status: 'all'
            };
        }

        // 获取学生是否已标记
        function isStudentMarked(studentId) {
            return localStorage.getItem(`${MARKED_KEY_PREFIX}${studentId}`) === 'true';
        }

        // 更新班级筛选器
        function updateClassFilter(students) {
            const classFilter = document.getElementById('class-filter');
            const classes = [...new Set(students.map(s => s.class))].sort((a, b) => a - b);

            // 保存当前选中的班级
            const currentClass = classFilter.value;

            // 更新选项
            classFilter.innerHTML = '<option value="all">所有班级</option>';
            classes.forEach(cls => {
                const option = document.createElement('option');
                option.value = cls;
                option.textContent = `${cls}班`;
                classFilter.appendChild(option);
            });

            // 恢复之前选中的班级（如果存在）
            if (currentClass && classes.includes(parseInt(currentClass))) {
                classFilter.value = currentClass;
            }
        }

        // 显示学生列表
        function displayStudents(students) {
            const container = document.getElementById('student-list');
            const statusInfo = document.getElementById('status-info');
            container.innerHTML = '';

            if (students.length === 0) {
                container.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:20px;">没有找到符合条件的学生</div>';
                statusInfo.innerHTML = '';
                return;
            }

            // 统计提交情况
            const total = students.length;
            const marked = students.filter(s => isStudentMarked(s.id)).length;
            const unmarked = total - marked;

            // 更新统计信息
            statusInfo.innerHTML = `
                <p>当前显示: ${total}名学生 | 已提交: ${marked}名 | 未提交: ${unmarked}名</p>
                <p>提交率: ${Math.round(marked / total * 100)}%</p>
            `;

            // 显示学生卡片
            students.forEach(student => {
                const marked = isStudentMarked(student.id);
                const item = document.createElement('div');
                item.className = `student-item ${marked ? 'marked' : ''}`;
                item.onclick = () => toggleMark(student.id);

                item.innerHTML = `
                    <div class="student-name">${student.seat}-${student.name}</div>
                `;
                // <div class="student-id">${student.id}</div>

                container.appendChild(item);
            });
        }

        // 筛选学生
        function filterStudents() {
            saveFilterState(); // 保存当前筛选状态

            const classFilter = document.getElementById('class-filter').value;
            const statusFilter = document.getElementById('status-filter').value;

            const allStudents = loadStudentData();
            if (allStudents.length === 0) return;

            const filtered = allStudents.filter(student => {
                const classMatch = classFilter === 'all' || student.class == classFilter;
                const marked = isStudentMarked(student.id);
                const statusMatch =
                    statusFilter === 'all' ||
                    (statusFilter === 'marked' && marked) ||
                    (statusFilter === 'unmarked' && !marked);

                return classMatch && statusMatch;
            });

            displayStudents(filtered);
        }

        // 切换标记状态
        function toggleMark(studentId) {
            const marked = isStudentMarked(studentId);
            localStorage.setItem(`${MARKED_KEY_PREFIX}${studentId}`, !marked);
            filterStudents(); // 刷新显示
        }

        // 重置所有标记
        function resetMarks() {
            if (confirm('确定要重置所有学生的提交状态吗？')) {
                const students = loadStudentData();
                students.forEach(student => {
                    localStorage.setItem(`${MARKED_KEY_PREFIX}${student.id}`, 'false');
                });
                filterStudents();
            }
        }

        // 初始化页面
        window.onload = function () {
            const students = loadStudentData();
            if (students.length > 0) {
                updateClassFilter(students);

                // 恢复筛选状态
                const filterState = loadFilterState();
                document.getElementById('class-filter').value = filterState.class;
                document.getElementById('status-filter').value = filterState.status;

                filterStudents();
            } else {
                document.getElementById('student-list').innerHTML =
                    '<div style="grid-column:1/-1;text-align:center;padding:20px;color:red;">未加载到学生数据，请检查数据源</div>';
            }
        };
    </script>
</body>

</html>